<script setup lang="ts">
import {VirtTree} from "@/components/VirtTree";

type Data = {
  id: string | number;
  title: string;
  children?: Data;
}[];

const customFieldNames = {
  key: 'id',
};

const list = shallowRef<Data>([]);
onMounted(() => {
  list.value = Array.from({length: 40}).map((_, i) => ({
    id: String(i),
    title: `Node-${i}`,
    children: Array.from({length: 3}).map((_, index) => ({
      id: `${i}-${index}`,
      title: `Node-${i}-${index}`,
      children: Array.from({length: 2}).map((_, indexChild) => ({
        id: `${i}-${index}-${indexChild}`,
        title: `Node-${i}-${index}-${indexChild}`,
      })),
    })),
  }));
});
const selectKeys = ref([]);
const JTree1 = ref()
let selectAllF = false

function selectAll() {
  selectAllF = !selectAllF;
  JTree1.value.selectAll(selectAllF)
}

let selectKey1 = false;

function onToggleSelectNode() {
  selectKey1 = !selectKey1;
  JTree1.value?.selectNode('0', selectKey1);
}

function onSelect(value) {
  console.log(value)
}
</script>

<template>
  <lay-container fluid class="page-box pa-12">
    <lay-card>
      <p class="header-title">树</p>
      <p class="header-describe">
        基于 vue-virt-list tree 组件二次开发<a> https://github.com/keno-lee/vue-virt-list</a>
      </p>
    </lay-card>
    <div style="display: flex;gap: 10px;">
      <div style="width: 30%;">
        <lay-card>
          <template #title>基础案例</template>
          <div style="height: 300px;overflow: auto">
            <VirtTree :field-names="customFieldNames" :list="list"></VirtTree>
          </div>
        </lay-card>
      </div>
      <div style="width: 30%;">
        <lay-card>
          <template #title>
            <div class="flex items-center" style="justify-content: space-between">
              <div>选择案例</div>
              <div>
                <lay-button size="sm" @click="selectAll">选择全部</lay-button>
                <lay-button size="sm" @click="onToggleSelectNode">选择第一个</lay-button>
              </div>
            </div>

          </template>
          <div style="height: 300px;overflow: auto">
            {{ selectKeys.join(', ') }}
            <VirtTree show-line selectable select-multiple @select="onSelect" ref="JTree1"
                      :field-names="customFieldNames"
                      v-model:selected-keys="selectKeys"
                      :list="list"></VirtTree>
          </div>
        </lay-card>
      </div>
      <div style="width: 30%;">
        <lay-card>
          <template #title>
            <div class="flex items-center" style="justify-content: space-between">
              <div>多选框案例</div>
            </div>

          </template>
          <div style="height: 300px;overflow: auto">
            {{ selectKeys.join(', ') }}
            <VirtTree show-line checkable @select="onSelect" ref="JTree1" :field-names="customFieldNames"
                      v-model:selected-keys="selectKeys"
                      :list="list"></VirtTree>
          </div>
        </lay-card>
      </div>
    </div>

  </lay-container>
</template>

<style scoped>

</style>
